<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #wrap {
      width: 80%;
      margin: 20px auto;
    }

    table {
      width: 100%;
      text-align: center;
    }

    .show {
      margin-top: 20px;
    }

    .btn_list .active {
      color: red;
    }

    .red {
      color: red;
    }
  </style>
</head>

<body>
  <div id="wrap">
    <div class="add_wrap">
      商品名称：<input type="text" id="pname">
      <br>
      商品类别：<select name="" id="sel">
        <option value="1">优选水果</option>
        <option value="2">卤味熟食</option>
        <option value="3">酒水饮料</option>
        <option value="4">休闲零食</option>
      </select>
      <br>
      商品现价：<input type="text" id="price">
      <br>
      商品原价：<input type="text" id="oldprice">
      <br>
      库存数量：<input type="text" id="inventory">
      <br>
      是否标红：<input type="radio" checked name="red" value="true"> 是 <input type="radio" name="red" value="false"> 否
      <br>
      <button id="addBtn">添加商品</button>
    </div>
    <div class="show">
      <div class="btn_list">
        <a class="active" href="#">全部</a>
        <a href="#" sid="1">优选水果</a>
        <a href="#" sid="2">卤味熟食</a>
        <a href="#" sid="3">酒水饮料</a>
        <a href="#" sid="4">休闲零食</a>
      </div>
      <div>
        <table border="1">
          <thead>
            <tr>
              <th>商品名称</th>
              <th>商品类别</th>
              <th>商品现价</th>
              <th>商品原价</th>
              <th>商品库存</th>
              <th>是否标红</th>
              <th>时间</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody id="mybody">
            <!-- <tr>
              <td>商品名称</td>
              <td>商品类别</td>
              <td>商品现价</td>
              <td>商品原价</td>
              <td>商品库存</td>
              <td>是否标红</td>
              <td>
                <a href="#">删除</a>
              </td>
            </tr> -->
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <script src="./javascripts/jquery-3.4.1.min.js"></script>
  <script src="./javascripts/index.js"></script>
</body>

</html>